import UserUpdateModal from '@/pages/userControl/components/UserUpdateModal';
import { uploadUsingPost } from '@/services/openAPI-backend/upLoadController';
import {
  changeAkandSkUsingPost,
  getCollectionsUsingGet,
  getLikesUsingGet,
  getLoginUserUsingGet,
  updateUserUsingPost,
} from '@/services/openAPI-backend/userController';
import {EyeOutlined, LikeFilled, LikeOutlined, PlusOutlined} from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { FormattedMessage} from '@umijs/max';
import {Drawer, GetProp, Image, TabsProps, UploadProps} from 'antd';
import {
  Avatar,
  Button,
  Card,
  Col,
  Descriptions,
  List,
  Popconfirm,
  Row,
  Space,
  Tabs,
  Upload,
  message,
  notification,
} from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import {
  collectInterfaceInfoUsingPost,
  likeInterfaceInfoUsingPost,
} from "@/services/openAPI-backend/interfaceInfoController";
import {keyframes} from "antd-style";
import { Link, history } from '@umijs/max';
import {getAuthorInfoUsingGet} from "@/services/openAPI-backend/articleController";
import {useParams} from "@@/exports";
type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
const fadeIn = keyframes`
  from {
    opacity: 0;
    transform: translateY(100%); /* 初始位置在屏幕下方100% */
  }
  to {
    opacity: 1;
    transform: translateY(0); /* 结束位置在正常位置 */
  }
`;

const onChange = (key: string) => {};

//页内表格
const DescriptionItem = ({ title, content }: DescriptionItemProps) => (
  <div
    className="site-description-item-profile-wrapper"
    style={{
      display: 'flex',
      marginBottom: 12,
      marginTop: 5,
      fontSize: 15,
    }}
  >
    {title}:
    <p
      style={{
        color: '#ad2102',
        marginLeft: 8,
        fontSize: 15,
      }}
    >
      {' '}
      {content}
    </p>
  </div>
);
const UserCenter: React.FC = () => {
  const [authority, setAuthority] = useState();
  const param = useParams();
  const [DrawerData, setDrawerdata] = useState();
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: (
        <span className="tab-label1" style={{ fontSize: 20, margin: 30, marginLeft: 30 }}>
          创作接口
        </span>
      ),
      children: (
        <List
          key="1"
          dataSource={authority?.interfaceInfoList}
          style={{ overflow: 'auto', maxHeight: "500px" }}
          renderItem={(item, index) => {
            const apilink = `/interface_info/${item.id}`;
            return (
              <List.Item>
                <List.Item.Meta
                  avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
                  title={
                    <a
                      style={{
                        fontSize: 16,
                      }}
                      href={apilink}
                    >
                      {item.name}
                    </a>
                  }
                  description={item.description}
                />
              </List.Item>
            );
          }}
        />
      ),
    },
    {
      key: '2',
      label: (
        <span className="tab-label2" style={{ fontSize: 20, margin: 30 }}>
          创作文章
        </span>
      ),
      children: (
        <List
          key="1"
          dataSource={authority?.articleList}
          style={{ overflow: 'auto', maxHeight: "500px" }}
          renderItem={(item, index) => {
            const apilink = `/forum/${item.id}`;
            return (

              <List.Item >
                <div style={{width: '100%',display: 'flex', justifyContent: 'space-between'}}>
                <List.Item.Meta
                  title={
                    <a
                      style={{
                        fontSize: 16,
                      }}
                      href={apilink}
                    >
                      {item?.title}
                    </a>
                  }
                  description={item?.summary}
                > </List.Item.Meta>
                <LikeFilled style={{marginRight: '3px',marginTop:'20px',fontSize: '16px',display: 'inline-block'}} /><a style={{color: 'gray',marginTop:'16px',fontSize: '16px',display: 'inline-block',marginRight:"15px"}}>{item?.likes}</a></div>
              </List.Item>
            );
          }}
        />
      ),
    },
  ];
  const loadData = async () => {
    try {
      const res = await getAuthorInfoUsingGet({
        userId: param.id,
      })
      if (res.data)
        setAuthority(res.data)
    }catch (e) {
      console.log(e)
    }
  };
  useEffect(() => {
    loadData();
  }, []);
  return (
    <Card title={<p style={{fontSize:'22px',fontWeight:'bold'}}>作者详情</p>} bordered={false} style={{ width: '100%', fontFamily: 'PingFang SC',animation: `${fadeIn} 1s ease-in-out`,
    }}>
      <Space
        direction="vertical"
        size={60}
        style={{
          marginLeft: 20,
        }}
      >
        <Row gutter={24}>
          <Card
            hoverable="true"
            title={
              <p style={{   fontSize: 30, marginTop: 15, marginLeft: 20,marginBottom: 15 }}>
                作者的个人卡片
              </p>
            }
            style={{ width: '40%', height: '100%', animation: `${fadeIn} 0.6s cubic-bezier(0.4, 0, 0.2, 1) both`, }}
          >
            <Descriptions style={{ marginLeft: 16 }} column={1} size="middle">
              <Descriptions.Item style={{ display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',}}
              >
              <Image src={authority?.userAvatar}></Image>
              </Descriptions.Item>
              <Descriptions.Item style={{              display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',marginBottom: 0,}}
              >
                <p style={{ fontSize: 21, fontWeight: 'bold',marginBottom: 0 }}>

                </p>
              </Descriptions.Item>
              <Descriptions.Item style={{ display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',}}
              >
                <p style={{ fontSize: 17}}>

                </p>
              </Descriptions.Item>
            </Descriptions>
            <Descriptions style={{ marginLeft: 16 }} column={1} size="middle">
              <Descriptions.Item
                label="作者名称"
                labelStyle={{ fontSize: 17, marginLeft: 20, marginBottom: 10 }}
              >
                <p style={{ fontSize: 17, marginLeft: 10 }}>
                  {authority?.userName}
                </p>
              </Descriptions.Item>
              <Descriptions.Item label="作者简介" labelStyle={{ fontSize: 17, marginLeft: 20 }}>
                <p style={{ fontSize: 17, marginLeft: 10 }}>{authority?.selfIntroduction
                }</p>
              </Descriptions.Item>
              <Descriptions.Item label="作者权限" labelStyle={{ fontSize: 17, marginLeft: 20 }}>
                <p style={{ fontSize: 17, marginLeft: 5 }}>{authority?.userRole==='admin'?'管理员':'普通用户'}</p>
              </Descriptions.Item>





            </Descriptions>
          </Card>

          <Col span={14}>
            <Card style={{ height: '100%',width: '100%',maxHeight: '100%', overflowY: 'auto', animation: `${fadeIn} 0.6s cubic-bezier(0.4, 0, 0.2, 1) both`,}}>
              <Tabs
                defaultActiveKey="1"
                items={items}
                onChange={onChange}
                style={{ fontSize: 16, marginleft: 30 }}
              ></Tabs>




            </Card>

          </Col>
        </Row>
        <Drawer
          width={720}
          styles={{fontSize:'18px'}}
          placement="right"
          closable={false}

          extra={<Space></Space>}
          size="default"
          keyboard={true}
        >
          <Card
            title={<p style={{fontSize: '24px',fontWeight: 'bold',marginTop: 20}}>接口详细信息</p>}
            style={{
              width: 580,
              fontSize: 55,
              marginBottom: 24,
              marginLeft: 5,
              borderRadius: 10,
              border: 0,
              justifyContent: 'space-between',
            }}
          >
            <Row>
              <Col span={12}>
                <DescriptionItem title="ID" content={DrawerData?.id}/>
              </Col>
              <Col span={12}>
                <DescriptionItem title="Name" content={DrawerData?.name} />
              </Col>
            </Row>
            <Row >
              <Col span={24}>
                <DescriptionItem title="描述" content={DrawerData?.description} style={{ whiteSpace: 'pre-wrap' }} />
              </Col>
            </Row>
            <Row>
              <Col>
                <DescriptionItem title="接口URL" content={DrawerData?.url} />
              </Col>
            </Row>
            <Row>
              <Col>
                <DescriptionItem title="请求头" content={DrawerData?.requestHeader} />
              </Col>
            </Row>
            <Row>
              <Col>
                <DescriptionItem title="响应头" content={DrawerData?.responseHeader} />
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <DescriptionItem
                  title="接口状态"
                  content={DrawerData?.status == 1 ? '已发布' : '已下线'}
                />
              </Col>
              <Col>
                <DescriptionItem title="请求方式" content={DrawerData?.method} />
              </Col>
            </Row>
            <Row>
              <Col>
                <DescriptionItem title="创建时间" content={DrawerData?.createTime} />
              </Col>
            </Row>
            <Row>
              <Col>
                <DescriptionItem title="更新时间" content={DrawerData?.updateTime} />
              </Col>
            </Row>
            <Row>
              <Col>
                <DescriptionItem title="请求参数" content={DrawerData?.requestParams} />
              </Col>
            </Row>
          </Card>
          <Space
            style={{
              display: 'flex',
              justifyContent: 'flex-end',
              alignItems: 'flex-end',
            }}
          >
            {/*<Button onClick={onClose}>Cancel</Button>*/}
            {/*<Button type="primary" onClick={onClose}>*/}
            {/*  OK*/}
            {/*</Button>*/}
          </Space>
        </Drawer>

      </Space>
    </Card>

    // 用户信息更新模块
  );

};

export default UserCenter;
